<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/mobile/css/font-icon.css">
    <title>手机端布局</title>
    <style>
        /*默认代码*/
        *{
            padding:0;
            margin:0;
        }
        a{
            text-decoration: none;
            color: #0C0C0C;
        }
        html{
            width:100vw;
            height: 100vh;
            font-size: 14px; /*给后面的rem用*/
        }
        body{
            min-width: 360px;
            background-color: #fff;
        }
        .header{
            background-color: #0C0C0C;
            color:#fff;
            height:5vh;
            width:100vw;
            display: flex;
            align-items: center;/*交叉轴*/
            position: fixed;/*定位*/
            justify-content: space-between;/*两端对齐*/
        }
        .header > span{
            margin-right: 1.5rem;
        }
        .header > a{
            color: #ffffff;
            margin-left: 1.5rem;
        }
        .slider > img{
            width:100vw;
        }
        .slider{
           height: 26vh;
           width:100vw;
            display: flex;
        }

        /*主导航区*/
        .nav{
            display: flex;
            flex-flow: row wrap;/*主轴水平 自动换行*/

        }
        .nav-main{
            width:25vw;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            padding: 1.2rem 0;
        }
        .nav-main > a > img{
            width:50%;
        }
        /*图片在当前项目中居中*/
        .nav-main > a:first-of-type{
            text-align: center;
        }
        .title{
            text-align: center;
            font-size: 1.4rem;
            font-weight: normal;
            margin-top: 1.2rem;
        }
        .hot{
            color: firebrick;
        }

        .hot-goods-list{
            padding: 2px;
            font-size: 0.6rem;
            display: flex;
            flex-flow: row wrap;/*主轴水平 自动换行*/
            /*justify-content: space-evenly;*/
        }
        .hot-goods-detail > a > img{
            width:100%;
        }
        .hot-goods-detail > a:first-of-type{
            text-align: center;
        }
       .hot-goods-detail{
           /*width:27%;*/
           flex:0 1 27vw;
           padding: 10px;
           display: flex;
           flex-flow: column nowrap;
           justify-content: center;
        }

    </style>
</head>
<body>
    {{--页眉--}}
    <div class="header">
        <a href="">LOGO</a>
        <span class="iconfont">&#xe61f</span>
    </div>
    {{--轮播--}}
    <div class="slider">
        <img src="/mobile/images/banner.jpg" alt="">
    </div>
    {{--主导航区--}}
    <div class="nav">
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link1.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link2.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link3.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link4.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link1.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link2.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link3.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>
        <div class="nav-main">
            <a href=""><img src="/mobile/images/link4.webp" alt=""></a>
            <a href=""><span>超市精选</span></a>
        </div>

    </div>

    {{--热销商品--}}
    <h2 class="title">热销商品 <span class="iconfont hot">&#xe60b</span></h2>
    <div class="hot-goods-list">

        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div>
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>

        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div>
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>

        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div>
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>

        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div>
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>
        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div>
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>
        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div>
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>
        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div>
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>

        <div class="hot-goods-detail">
            <a href=""><img src="/mobile/images/goods1.jpg" alt=""></a>
            <p>小米 mix3 64G</p>
            <div class="hot-goods-description">
                <span>￥&nbsp;5600.00&nbsp;</span>
                <span class="iconfont">&#xe602</span>
            </div>
        </div>

    </div>

    {{--商品列表--}}
    <div class="list-goods"></div>

    {{--页脚--}}
    <footer></footer>

</body>
</html>
